<template>
  <div class="talk">
    <talk-header></talk-header>
    <transition name="talk">
      <talk-dialog :currentCompany="enterCompanyData" @back="backToHere" v-show="isEnterDialog"></talk-dialog>
    </transition>
    <div v-show="!isEnterDialog">
      <talk-search></talk-search>
      <talk-list :msgList="msgList" @getEnterCompany="getEnterComp"></talk-list>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import TalkHeader from './components/Header.vue'
  import TalkSearch from './components/Search.vue'
  import TalkList from './components/MsgList.vue'
  import TalkDialog from './components/Dialog.vue'
  export default {
    name: 'Talk',
    components: {
      TalkHeader,TalkSearch,TalkList,TalkDialog
    },
    data () {
      return {
        isEnterDialog:false,
        msgList:[],
        enterCompanyData:{}
      }
    },
    methods: {
      getHRInfo(){
        axios.get('/api/talk.json')
        .then(this.getHRInfoSucc)
      },
      getHRInfoSucc(res){
        if(res.status == 200 && res.data){
          const data = res.data
          this.msgList = data.msgList
        }
      },
      getEnterComp(idx){
        // console.log(idx)
        this.enterCompanyData = this.msgList[idx]
        this.isEnterDialog = true
        // console.log(this.enterCompanyData)
      },
      backToHere(){
        this.isEnterDialog = false
      }
    },
    mounted(){
      this.getHRInfo()
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .talk{
    width: 100%;
    height: 100vh;
    background-color: #fdfdfd;
    box-sizing: border-box;
  }

  .talk-enter-active{
    animation: slideInRight 0.3s linear;
  }
  .talk-leave-active{
    animation: slideInRight 0.3s reverse linear;
  }

  @keyframes slideInRight {
    from {
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
      visibility: visible;
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

</style>
